<template>
  <!--事件处置   -->
  <div class="preset-log">
    <div v-if="$route.query.formName || $route.query.name" class="back-title">
      <i class="el-icon-arrow-left" @click="$router.go(-1)">返回</i>
    </div>

        <div class="container-box">
          <!-- 事件研判主题 -->
          <!-- <div style="margin-bottom: 20px; font-size: 20px; font-weight: 500">
            事件研判
          </div> -->
          <!-- 搜索框 -->
          <div class="container-search">
            <el-form
              ref="formRef"
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
              style="position: relative"
            >
              <div class="container-search-row">
                <!-- 左边 -->
                <div class="search-col-flex">
                  <el-form-item label="关键字" prop="keyword">
                    <el-input
                      v-model="formInline.keyword"
                      placeholder="请输入"
                      clearable
                      style="width: 230px"
                    />
                  </el-form-item>
                  <el-form-item
                    class="el-form-item-radius"
                    label="产生时间"
                    prop="time"
                  >
                    <el-radio-group
                      v-model="formInline.shortcut"
                      class="el-radio-radius"
                      @change="handleTimeRange($event)"
                    >
                      <el-radio-button label="day">近一日</el-radio-button>
                      <el-radio-button label="week">近一周</el-radio-button>
                      <el-radio-button
                        class="el-radio-button-radius"
                        label="month"
                        >近一月</el-radio-button
                      >
                    </el-radio-group>

                    <el-date-picker
                      ref="dataPickerRef"
                      v-model="formInline.time"
                      class="data-picker-radius"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="{ iconClass: 'el-icon-arrow-right' }"
                      :append-to-body="true"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :default-time="['00:00:00', '00:00:00']"
                      @change="handleChangeDatePicker"
                    />
                  </el-form-item>
                  <el-form-item label="来源单位" prop="keyword">
                    <el-select v-model="formInline.power" placeholder="请选择">
                      <el-option
                        v-for="item in powerOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item style="margin-top: 34px">
                    <el-button
                      @click="handleReset('formRef')"
                      icon="el-icon-video-play"
                      >重置</el-button
                    >
                  </el-form-item>
                  <el-form-item style="margin-top: 34px">
                    <el-button
                      type="primary"
                      @click="handleClcikSearch"
                      icon="el-icon-plus"
                      >查询</el-button
                    >
                  </el-form-item>
                </div>
                <!-- 右边 -->
                <div style="margin-top: 34px">
                  <el-form-item style="text-align: right; width: 100%">
                    <el-button @click="handleExport">导出</el-button>
                  </el-form-item>
                </div>
              </div>
            </el-form>
          </div>
          <!-- 主体部分 -->
          <div class="page-container">
            <!-- 左侧筛选器 -->
            <common-filter
              ref="commonFilterRef"
              :tree="treeData"
              @emitSel="getSel"
            />
            <!-- 右侧主题 -->
            <div class="right-container">
              <div class="tabs">
                <span
                  v-for="(item, index) in tabsObj"
                  :key="index"
                  :class="{ tab_active: index == activeIndex }"
                  @click="handleChangeTab(item.statusValue, index)"
                  >{{ item.statusName }}({{ item.count }})</span
                >
              </div>
              <!-- 表格部分 -->
              <div class="tab-content">
                <div class="tab-header">
                  <div class="left-btn">
                    <template v-if="activeIndex == 0">
                      <!--                    <el-button type="text" @click="handleSign">批量标记误报</el-button>-->
                      <!--                    <el-button type="text" @click="handleDeal">批量处置</el-button>-->
                    </template>
                  </div>
                  <div class="right-btn">
                    <span @click="handleTimeSort"
                      >时间排序 <i class="el-icon-time"
                    /></span>
                    <span @click="handleEventLevelSort"
                      >事件级别排序<i class="el-icon-sort"
                    /></span>
                  </div>
                </div>
                <HkTable
                  :table-data="tableData"
                  :table-columns="tableLabelLists"
                  :is-need-index="true"
                  :selection="false"
                  :total="total"
                  :table-height="80"
                  :layout="layout"
                  @handleSelectionChange="handleSelectionChange"
                  @changePage="changePage"
                >
                  <template #list="scope">
                    <div>
                      <p class="tablelist-title">
                        {{ scope.row.row.metrics_name }}
                      </p>
                      <!-- 事件类别 -->
                      <el-row>
                        <el-col :span="6"
                          ><span style="color: #111111">事件类别：</span
                          ><span
                            v-for="(i, index) in scope.row.row.event_category"
                            :key="index"
                            style="margin-left: 20px"
                            >{{ i }}</span
                          ></el-col
                        >
                        <el-col :span="6"
                          ><span style="color: #111111">事件级别：</span
                          ><span
                            v-for="(i, index) in scope.row.row.event_level"
                            :key="index"
                            style="margin-left: 35px"
                            :style="{
                              color: i === '一般' ? '#4B6EEF' : '#00D29B',
                            }"
                            >{{ i }}</span
                          ></el-col
                        >
                        <el-col :span="6"
                          ><span style="color: #111111">发生时间：</span
                          ><span style="margin-left: 20px">{{
                            scope.row.row.startTime
                          }}</span></el-col
                        >
                        <el-col :span="6"
                          ><span></span>{{ scope.row.row.endTime }}</el-col
                        >
                      </el-row>
                      <!-- 事件详情 -->
                      <el-row>
                        <el-col class="hk-flex" :span="24"
                          ><span style="color: #111111">事件详情：</span
                          ><span class="description">{{
                            scope.row.row.description
                          }}</span></el-col
                        >
                      </el-row>
                      <!-- 关联设备 -->
                      <el-row>
                        <el-col :span="6">
                          <span style="color: #111111">关联设备(1)：</span>
                          <span
                            v-for="(i, index) in scope.row.row.event_category"
                            :key="index"
                            class="description"
                            >终端F5T6</span
                          ></el-col
                        >
                        <el-col :span="6"
                          ><span style="color: #111111">关联人员(1)：</span
                          ><span
                            v-for="(i, index) in scope.row.row.event_level"
                            :key="index"
                            class="description"
                            :class="
                              i == '特别重大'
                                ? 'text-level-greatmast'
                                : i == '重大'
                                ? 'text-level-great'
                                : i == '较大'
                                ? 'text-level-big'
                                : 'text-level-normal'
                            "
                            >张浩</span
                          ></el-col
                        >
                        <el-col :span="6"
                          ><span style="color: #111111">关联应用(0)：</span
                          ><span class="description">一</span>
                        </el-col>
                        <el-col :span="6"
                          ><span style="color: #111111">来源单位：</span
                          ><span class="description" style="color: #666666"
                            >新疆维吾尔自治区纪委自监管平台</span
                          >
                        </el-col>
                      </el-row>
                      <!-- 按钮数组 -->
                      <div
                        style="
                          display: flex;
                          margin-top: 20px;
                          margin-bottom: 10px;
                        "
                      >
                        <div
                          class="listCss"
                          v-for="(item, index) in listArr"
                          :key="index"
                          :class="{ activeCss: index === 0 }"
                          @click="activeFun(item, index)"
                        >
                          {{ item }}
                        </div>
                      </div>
                    </div>
                  </template>
                </HkTable>
              </div>
            </div>
          </div>
        </div>
      <HanldleLaunchWorkOrder
        ref="handleLaunchWorkOrderRef"
        @handleSubmit="handleLaunchSubmit"
      />
      <HandleDialog ref="handleDialogRef" @handleSubmit="handleHandling" />
      <KonwledgeAdd
        ref="k_dia"
        :form="formData"
        :title="title"
        @handleSave="getList"
      />
      <supervision-dialog
        ref="SupervisionDialogRef"
        @handleSubmit="handleHandling"
      />
      <audit-dalog ref="AuditDialogRef" @handleSubmit="handleHandling" />
      <search-dialog ref="SearchDialogRef" @handleSubmit="handleHandling" />
      <disposition-dialog
        ref="dispositionDialogRef"
        @handleSubmit="handleHandling"
      />
      <case-dialog ref="caseDialogRef" @handleSubmit="handleHandling" />

  </div>
</template>

<script>
import HkTable from "@/components/HKTable";
import CommonFilter from "./component/CommonFilter.vue";
import KonwledgeAdd from "./component/KonwledgeAdd";
import HandleDialog from "./component/HandleDialog.vue";
import SupervisionDialog from "./component/SupervisionDialog.vue";
import AuditDalog from "./component/AuditDalog.vue";
import SearchDialog from "./component/SearchDialog.vue";
import DispositionDialog from "./component/DispositionDialog.vue";
import CaseDialog from "./component/CaseDialog.vue";

import HanldleLaunchWorkOrder from "./component/SupervisionDialog.vue";
// import { tableList, getTree, getTotal, disposal, handleFalse, preplan } from '@/api/dispose/incidentHandling'
// import { parseTime } from '@/utils/hongke.js'

export default {
  //   components: { HkTable, CommonFilter, HandleDialog, KonwledgeAdd, HanldleLaunchWorkOrder },
  components: {
    HkTable,
    CommonFilter,
    KonwledgeAdd,
    HandleDialog,
    HanldleLaunchWorkOrder,
    SupervisionDialog,
    AuditDalog,
    SearchDialog,
    DispositionDialog,
    CaseDialog,
  },
  data() {
    return {
      layout: "prev, pager, next,sizes",
      tabsObj: [
        { statusName: "未处置", count: "86" },
        { statusName: "处置中", count: "23" },
        { statusName: "已处置", count: "56" },
      ],
      activeIndex: 0,
      formInline: {
        keyword: "",
        region: "",
        time: "",
      },
      powerOptions: [],
      showHighSearch: false,
      // 树形组件
      treeData: [
        {
          name: "事件级别",
          // 控制图标
          showchild: true,
          children: [
            { name: "重大", count: 66 },
            { name: "较大", count: 64 },
            { name: "一般", count: 162 },
          ],
        },
        {
          name: "事件分类",
          showchild: true,
          children: [
            { name: "用户行为异常", count: 56 },
            { name: "管理员行为异常", count: 204 },
            { name: "网络和应用服务异常", count: 32 },
            { name: "外部边界异常", count: 0 },
            { name: "管理配置违规", count: 0 },
          ],
        },
      ],
      defaultEventLevel: {},
      defaultProps: {
        children: "children",
        label: "label",
      },
      loading: false,
      tableData: [
        {
          metrics_name: "运维人员使用不合规设备执行运维操作",
          event_category: ["运维异常"],
          event_level: ["一般"],
          startTime: "2022-07-26 16:28:22",
          description:
            "发现运维人员工单处置不规范-运维人员在工作时同执行可能影响正常业务的运维操作，系统名称：泓科主机监控与南计系统，访问地址上：http://192.168.1.217/2",
        },
        {
          metrics_name: "管理员超授权范围运维应用系统",
          event_category: ["运维异常"],
          event_level: ["较大"],
          startTime: "2022-07-26 10:34:02",
          description:
            "发现运维人员工单处置不规范-运维人员在工作时同执行可能影响正常业务的运维操作，系统名称：泓科主机监控与南计系统，访问地址上：http://192.168.1.217/2",
        },
        {
          metrics_name: "应用系统存在异常访问序列或页面遍历行为",
          event_category: ["网络攻击"],
          event_level: ["一般"],
          startTime: "2022-07-26 16:28:22",
          description:
            "发现运维人员工单处置不规范-运维人员在工作时同执行可能影响正常业务的运维操作，系统名称：泓科主机监控与南计系统，访问地址上：http://192.168.1.217/2",
        },
      ],
      // 按钮数组
      listArr: [
        "督办",
        "核查取证",
        "生成案件",
        "协查申请",
        "情报维护",
        "处置情况研判",
      ],
      // 默认为0(如不需要默认可设为null)，点击时将索引赋值给active，从而实现点击选中效果
      activeVar: 0,
      //  循环列表
      // listArr: [
      //   "督办",
      //   "核查取证",
      //   "生成案件",
      //   "协查申请",
      //   "情报维护",
      //   "处置情况研判",
      // ],
      total: 0,
      queryParams: {
        current: 1,
        size: 10,
        timeSort: 0,
        eventLevelSort: undefined,
        disposalStatus: 0,
      },
      tableLabelLists: [{ label: "", param: "list", type: "slot" }],
      detailData: {},
      checkList: [],
      currentGid: "",
      tableCheckList: [],
      searchQuery: {},
      startTime: undefined,
      endTime: undefined,
      title: "",
      formData: {},
    };
  },
  created() {},
  methods: {
    // 按钮数组方法
    activeFun(item, index) {
      // item 为被选中的元素体
      this.activeVar = index;
      if (index === 0) {
        this.$refs.SupervisionDialogRef.show();
      }
      if (index === 1) {
        this.$refs.AuditDialogRef.show();
      }
      // 生成案件
      if (index === 2) {
        this.$refs.caseDialogRef.show();
      }
      // 协查申请
      if (index === 3) {
        this.$refs.SearchDialogRef.show();
      }
      if (index === 5) {
        this.$refs.dispositionDialogRef.show();
      }
    },
    /** 查询按钮  */
    handleClcikSearch() {
      this.handleSeach();
      this.getLeftTree({
        keyword: this.formInline.keyword,
        startTime: this.startTime,
        endTime: this.endTime,
      });
      this.getTotalData({
        keyword: this.formInline.keyword,
        startTime: this.startTime,
        endTime: this.endTime,
      });
    },
    handleSeach() {
      if (this.formInline?.time && this.formInline?.time != null) {
        this.startTime = new Date(this.formInline?.time[0]).getTime();
        this.endTime = new Date(this.formInline?.time[1]).getTime();
      }
      this.searchQuery = Object.assign({}, this.queryParams, this.formInline, {
        startTime: this.startTime,
        endTime: this.endTime,
        filters: this.checkList,
      });
      this.getList(this.searchQuery);
      // this.getLeftTree();
    },
    /** 重置  */
    handleReset(formName) {
      this[formName] = {};
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
        this.formInline = {
          keyword: "",
          region: "",
          time: "",
        };
        this.startTime = null;
        this.endTime = null;
        this.handleSeach();
        this.getLeftTree({
          keyword: this.formInline.keyword,
          startTime: null,
          endTime: null,
        });
        this.getTotalData({
          keyword: this.formInline.keyword,
          startTime: null,
          endTime: null,
        });
      });
    },
    /** 获取列表数据 */
    getList(query) {
      this.loading = true;
      tableList(query).then((res) => {
        this.loading = false;
        this.tableData = res.list;
        this.total = res.total;
      });
    },
    /** 获取事件状态统计 */
    getTotalData(query) {
      getTotal(query).then((res) => {
        this.tabsObj = res;
        /*  let result = res
        this.tabsObj = result.filter(i => {
          return i.statusValue != '2'
        })*/
      });
    },
    /** 三种时间区间选择*/
    handleTimeRange(value) {
      const end = new Date();
      const start = new Date();
      let nstart = null;
      let nend = null;
      let wstart = null;
      let wend = null;
      let mstart = null;
      let mend = null;
      switch (value) {
        case "day":
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
          nstart = this.setStartTime(start.getTime());
          nend = this.setEndTime(start.getTime());
          this.formInline.time = [parseTime(nstart), parseTime(nend)];
          break;
        case "week":
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
          wstart = this.setStartTime(start.getTime());
          wend = this.setEndTime(end.getTime());
          this.formInline.time = [parseTime(wstart), parseTime(wend)];
          break;
        case "month":
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
          mstart = this.setStartTime(start.getTime());
          mend = this.setEndTime(end.getTime());
          this.formInline.time = [parseTime(mstart), parseTime(mend)];
          break;
        default:
          break;
      }
    },
    // time为某一天的时间戳
    setStartTime(time) {
      const nowTimeDate = new Date(time);
      return nowTimeDate.setHours(0, 0, 0, 0);
    },
    setEndTime(time) {
      const nowTimeDate = new Date(time);
      return nowTimeDate.setHours(23, 59, 59, 999);
    },
    /** 时间转化 */
    timestampToTime(timestamp) {
      const date = new Date(timestamp); // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + "-";
      const M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      const D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      const h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      const m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      const s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    /** 时间选择器触发事件*/
    handleChangeDatePicker(value) {
      this.formInline.shortcut = "";
    },
    /** tabs页切换*/
    handleTabsClick(tab, event) {
      this.queryParams = { current: 1, size: 10 };
      this.handleSeach();
    },
    /** 详情 */
    handleDetail(row) {
      // this.$router.push({
      //   path: "/dispose/incidentHandle/detail",
      //   query: { id: row.id, showBack: true },
      // });
    },
    /** 获取左侧树的数据 */
    getLeftTree(query, type) {
      getTree(query).then((res) => {
        const result = res;
        this.treeData = [];
        if (result.length > 0) {
          result.forEach((i, index) => {
            const newChildren = i.children.map((item) => {
              return {
                source: i.normalGroupCode,
                name: item.normalName,
                count: item.count,
                value: item.normalCode,
              };
            });
            if (!type) {
              if (i.normalGroupCode === "event_level") {
                this.defaultEventLevel = {
                  showchild: true,
                  name: i.groupName,
                  value: i.normalGroupCode,
                  children: newChildren,
                };
                this.treeData.push(this.defaultEventLevel);
              } else {
                this.treeData.push(
                  Object.assign({
                    showchild: true,
                    name: i.groupName,
                    value: i.normalGroupCode,
                    children: newChildren,
                  })
                );
              }
            } else {
              if (i.normalGroupCode === "event_level") {
                this.treeData.push(this.defaultEventLevel);
              } else {
                this.treeData.push(
                  Object.assign({
                    showchild: true,
                    name: i.groupName,
                    value: i.normalGroupCode,
                    children: newChildren,
                  })
                );
              }
            }
          });
        }
      });
    },
    /** 左侧树点击事件 */
    getSel(data, checkData) {
      this.checkList = [];
      data.forEach((i) => {
        if (i.sourceValues.length > 0) {
          this.checkList.push(i);
        }
      });
      this.handleSeach();
      this.getTotalData({
        keyword: this.formInline.keyword,
        startTime: null,
        endTime: null,
        filters: this.checkList,
      });
      this.getLeftTree(
        {
          keyword: this.formInline.keyword,
          startTime: this.startTime,
          endTime: this.endTime,
          filters: this.checkList,
        },
        "checkData"
      );
      this.$refs.commonFilterRef.setChecked(checkData);
    },
    /** 切换处置tabs */
    handleChangeTab(value, index) {
      console.log(value);
      this.queryParams.disposalStatus = value;
      this.queryParams.current = 1;
      this.activeIndex = index;
      this.handleSeach();
    },

    /**  处置按钮 */
    handleDeal(row) {
      disposal({ ids: [row.id], disposalStatus: 2 }).then((res) => {
        this.$message.success("操作成功！");
        this.handleHandling();
      });
    },
    /** 发起工单 */
    handleLaunchWorkOrder(row) {
      if (window.loginType === "UM") {
        this.$refs.handleLaunchWorkOrderRef.show(row);
      } else {
        disposal({ ids: [row.id], disposalStatus: 2 }).then((res) => {
          this.$message.success("操作成功！");
          this.handleHandling();
        });
      }
    },
    /**  应急响应预案按钮  */
    handleEmergencyPlanDetail(row) {
      preplan({ kpiCode: row.metrics_code }).then((res) => {
        if (res) {
          this.formData = res;
          this.title = "查看详情";
          this.$refs.k_dia.open = true;
        } else {
          this.$modal.msgSuccess("该事件暂无应急响应预案!");
        }
      });
    },
    /** 关闭按钮 */
    handleClose(row) {
      let ids = [];
      if (row.id) {
        ids = [row.id];
      } else {
        ids = this.tableCheckList.map((i) => {
          return i.id;
        });
      }
      this.$refs.handleDialogRef.show(ids);
    },
    /** 标记误报*/
    handleSign(row) {
      let ids = [];
      if (row.id) {
        ids = [row.id];
      } else {
        ids = this.tableCheckList.map((item) => {
          return item.id;
        });
      }

      this.$modal
        .confirm("是否确认标记误报？")
        .then(function () {
          return handleFalse({ ids: ids });
        })
        .then((res) => {
          const _self = this;
          this.$modal.msgSuccess(res);
          setTimeout(function () {
            _self.getTotalData({});
            _self.handleSeach();
          }, 500);
        })
        .catch(() => {});
    },
    /** 按时间排序 */
    handleTimeSort() {
      this.queryParams.eventLevelSort = undefined;
      if (this.queryParams.timeSort == 0) {
        this.queryParams.timeSort = 1;
      } else {
        this.queryParams.timeSort = 0;
      }
      this.handleSeach();
    },
    /** 按事件级别排序 */
    handleEventLevelSort() {
      this.queryParams.timeSort = undefined;
      if (this.queryParams.eventLevelSort == 0) {
        this.queryParams.eventLevelSort = 1;
      } else {
        this.queryParams.eventLevelSort = 0;
      }
      this.handleSeach();
    },
    /** 列表复选框 */
    handleSelectionChange(data) {
      this.tableCheckList = data;
    },
    changePage(data) {
      this.queryParams.current = data.current;
      this.queryParams.size = data.size;
      this.handleSeach();
    },
    /** 告警核实   */
    handleAlarm() {},
    /**  导出  **/
    handleExport() {
      this.handleSeach();
      this.download(
        window.baseUrl.dispose + "/incident/events/export",
        this.searchQuery,
        `事件列表_${new Date().getTime()}.xls`,
        "object"
      );
    },
    /**  处置后刷新 */
    handleHandling() {
      setTimeout(() => {
        this.getTotalData({});
        this.handleSeach();
      }, 500);
    },
    /** 发起工单提交后刷新  */
    handleLaunchSubmit() {
      setTimeout(() => {
        this.getTotalData({});
        this.handleSeach();
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0px !important;
}
::v-deep .el-input--medium .el-input__inner {
  height: 32px;
  color: #606266;
  margin-top: 2px;
}
::v-deep .el-radio-button:first-child .el-radio-button__inner {
  color: rgba(0, 0, 0, 0.25);
  margin-top: 2px;
}

::v-deep.demo-form-inline
  .container-search-row
  .data-picker-radius[data-v-15b2631f] {
  width: 275px;
  height: 32px;
  margin-top: 2px;
}
::v-deep .el-range-editor--medium .el-range__icon,
.el-range-editor--medium .el-range__close-icon {
  margin-top: -3px;
}
::v-deep .el-button--medium {
  padding: 8px 20px;
  font-size: 14px;
  border-radius: 4px;
}
::v-deep .el-icon-date:before {
  margin-left: 239px;
}
// 默认样式
.listCss {
  cursor: pointer;
  // width: 100px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  border: 1px solid #ccc;
  background: #ffffff;
  border: 1px solid rgba(229, 229, 229, 1);
  border-radius: 4px;
  margin-right: 10px;
  padding-left: 25px;
  padding-right: 25px;
  font-size: 14px;
  color: #000000;
}
.listCss:active,
.activeCss {
  background: #4b6eef;
  color: #ffffff;
}
.el-form-item-radius {
  ::v-deep .el-form-item__content {
    display: flex !important;
    align-items: flex-start !important;
  }
}

.demo-form-inline {
  flex-wrap: wrap;

  .container-search-row {
    display: flex;
    justify-content: space-between;
    .search-col-flex {
      display: flex;
    }
    .search-form-item {
      width: 15%;
      margin-right: 10px;
    }

    &.high-search-row {
      padding: 10px;
      background: #f3f5fc;
      border-top: 1px solid #4b6eef;
      position: relative;

      &::before {
        display: inline-block;
        content: "";
        position: absolute;
        width: 10px;
        border-bottom: 6px solid #4b6eef;
        border-top: 6px solid transparent;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        top: -13px;
        left: 5%;
      }
    }

    width: 100%;

    .el-col {
      display: flex;
      align-items: flex-end;
      margin-bottom: 10px;
    }

    .data-picker-radius {
      border-left: 0 !important;
      border-radius: 0 4px 4px 0 !important;
    }
  }
}

.preset-log {
  height: 100%;
  background: #eef0f5;
  padding: 0px;

  .page-container {
    margin-top: 20px;
    background: #fff;
    overflow: auto;

    .left-container {
      overflow: auto;
    }

    .right-container {
      overflow: hidden;
      .targetTable {
        flex: 1;
        height:100%;
        overflow: hidden;
      }
    }
  }

  .el-form {
    display: flex;
  }

  .el-form-item {
    margin-bottom: 0 !important;
  }

  .container-box {
    height: 100%;

    .container-search {
      padding: 0 15px 15px;
      background: #fff;
    }
  }

  .left-container {
    height: 100%;
    border-top: 0px !important;
  }

  // 跳转的部分
  .m-container {
    width: 100%;
    height: 100%;
    background: #e5ecf6;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 14px;
    // 头部
    .m-header {
      background: #fff;
      box-shadow: 0 0 40px 0 rgb(0 0 0 / 8%);
      border-radius: 4px;
      margin-bottom: 10px;
    }

    // 线
    .header-line {
      width: 100%;
      height: 38px;
      line-height: 38px;
      padding: 0 8px;
      border-bottom: 1px solid #e8e8e8;
      cursor: pointer;
    }

    .filter-source {
      padding: 10px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .drawmain {
      padding: 0 16px 10px 16px;

      .addSearchParam-container {
        max-height: 265px;
        height: 100%;
        overflow: auto;

        .one-level-search-content {
          position: relative;
          padding-left: 40px;
          padding-bottom: 4px;

          .change-one-level-btn {
            position: absolute;
            left: 0;
            top: calc(50% - 6px);
            z-index: 3;
            padding: 0;
            width: 24px;
            height: 24px;
            color: #2979ff;
            border: none;
            background: #edf5ff;
            border-radius: 2px;
          }

          .addSearchParam {
            width: 100%;
            margin-bottom: 8px;
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 20%;
            background-color: #f8f9fc;
            border: 1px solid #f0f0f0;

            &::after {
              content: "";
              position: absolute;
              top: -11px;
              left: -29px;
              bottom: -11px;
              border-left: 1px solid #cfe4fe;
            }

            .content {
              flex: 1;
              overflow-y: auto;
              display: flex;
              padding: 16px;
              justify-content: space-between;
              align-items: end;

              & > div {
                width: 60%;
                height: 100%;
                overflow-y: auto;
              }

              .searchContent {
                display: table;
                max-height: 93%;
                position: relative;
                padding-left: 29px;
              }

              .add-btn {
                padding-left: 10px;
              }
            }
          }
        }
      }
    }
  }

  .params-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      top: -4px;
      left: -15px;
      bottom: -15px;
      border-left: 1px solid #cfe4fe;
    }

    .params-input {
      margin-right: 8px;
    }
  }

  .add-search-bottom {
    display: flex;
    justify-content: space-between;
    padding-left: 40px;
  }

  .l-container {
    background: #fff;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .total {
      padding: 8px;
      font-size: 14px;
    }
  }
}

::v-deep .el-tabs__nav-wrap::after {
  background: transparent !important;
}

.tabs {
  span {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
    // padding: 8px 15px;
    border-bottom: 2px solid transparent;
    width: 124px;
    height: 32px;
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(229, 229, 229, 1);
    border-radius: 4px;
    &.tab_active {
      // display: inline-block;
      background: #4b6eef;
      border-radius: 4px;
      color: #ffffff;
    }
  }
}

.tab-content {
  position: relative;
  flex:1;
  overflow:hidden;
  .tab-header {
    position: absolute;
    top: 24px;
    font-size: 14px;
    right: 2%;
    z-index: 2;
    width: 94%;
    display: flex;
    align-items: center;

    .left-btn {
      flex: 1;
    }

    .right-btn {
      span {
        display: inline-block;
        padding: 10px 0;
        cursor: pointer;
        margin-left: 20px;
      }
    }
  }
}

.tablelist-title {
  // font-weight: 9000;
  font-size: 16px;
  color: #111111;
  font-weight: 500;
  margin: 10px 0;
}

::v-deep .el-table__body-wrapper {
  //height: calc(100% - 50px) !important;
}

::v-deep .el-button--danger.is-plain:focus {
  background: transparent !important;
  color: #ff4949 !important;
}

::v-deep .description {
  width: 90%;
  // display: inline-block;
  // word-wrap: break-word;
  // word-break: break-all;
  // overflow: hidden;
  // white-space: nowrap;
  // text-overflow: ellipsis;
  padding-top: 8px;
  margin-left: 20px;
}

::v-deep .text-ellipsis {
  width: calc(100% - 140px);
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
